<template>
  <div>
    <el-button type="primary" @click="onAddMsg">添加</el-button>
    <div>
      <el-dialog v-model="dialogFormVisible" title="添加公告" width="1000px">
        <el-form :model="form">
          <el-form-item label="公告名称" :label-width="formLabelWidth">
            <el-input v-model="form.messageName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="公告类型" :label-width="formLabelWidth">
            <el-select v-model="form.messageType" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :value="item.dictId"
                :key="item.dictId"
                :label="item.dictName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公告状态" :label-width="formLabelWidth">
            <el-radio-group v-model="form.messageStatus">
              <el-radio :value="0">正常</el-radio>
              <el-radio :value="1">已过期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公告结束时间" :label-width="formLabelWidth">
            <el-col :span="11">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="请选择日期"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="公告内容" :label-width="formLabelWidth">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="form.messageText"
                :defaultConfig="editorConfig"
                @onCreated="handleCreated"
              />
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">清空</el-button>
            <el-button type="primary" @click="onSubmitMsg"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div><h1>公告列表</h1></div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="messageId" label="公告ID" />
        <el-table-column prop="messageName" label="公告名称" />
        <el-table-column prop="messageType" label="公告类型">
          <template #default="scope">
            <el-tag v-if="scope.row.messageType == 1">公告</el-tag>
            <el-tag v-else>通知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="messageText" label="公告内容" />
        <el-table-column prop="createTime" label="创建时间/生效时间" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column prop="messageStatus" label="公告状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.messageStatus == 0"
              >正常</el-tag
            >
            <el-tag type="warning" v-else>已过期</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="pageInfoVo.pageNum"
        v-model:page-size="pageInfoVo.pageSize"
        :page-sizes="[2, 4, 6, 8]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { pageMsgList, getDict, addMsg } from "@/api/api";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const total = ref(0);
const pageInfoVo = ref({
  pageNum: 1,
  pageSize: 2,
});
const loadMsgList = () => {
  pageMsgList(pageInfoVo.value).then((res) => {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const typeList = ref([]);
const form = ref({
  endTime: null,
  messageName: null,
  messageText: null,
  messageType: null,
  messageStatus: null,
});
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageInfoVo.value.pageSize = val;
  loadMsgList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageInfoVo.value.pageNum = val;
  loadMsgList();
};
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

onMounted(() => {
  loadMsgList();
  getDict(1).then((res) => {
    typeList.value = res.data.data;
  });
});
const onAddMsg = () => {
  dialogFormVisible.value = true;
  form.value = {
    endTime: null,
    messageName: null,
    messageText: null,
    messageType: null,
    messageStatus: null,
  };
};
const onSubmitMsg = () => {
  addMsg(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      dialogFormVisible.value = false;
      loadMsgList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
</script>

<style scoped></style>
